<!-- 产能统计 -->
<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="拌合站" prop="identifier" class="query">
        <el-select v-model="queryParams.identifier" clearable placeholder="请选择">
          <el-option v-for="item in stationList" :key="item.name" :label="item.name" :value="item.identifier"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="时间范围" prop="id">
        <deatetime ref="deatetime" v-model="queryParams.time"> </deatetime>
      </el-form-item>

      <el-form-item label="日期">
        <div class="datetimepicker">
          <el-select v-model="queryParams.type" placeholder="请选择" style="width:65px;">
            <el-option label="日" value="3"></el-option>
            <el-option label="周" value="0"></el-option>
            <el-option label="月" value="1"></el-option>
            <el-option label="季" value="2"></el-option>
          </el-select>
        </div>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" v-hasPermi="['zhgd:allCapacity:query']">搜索</el-button>
        <!-- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> -->
      </el-form-item>
    </el-form>

    <!-- Echarts -->
    <div id="Chart4" style="`width: 100%;height: 400px;transform-origin: 0 0;`"></div>
  </div>
</template>
    
<script>
import { deptListData } from "@/api/zhgd/hntManage";
import { productGetList } from "@/api/zhgd/allCapacity";
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import deatetime from "@/components/Datetime"; // 生产日期


export default {
  name: "HntManage",
  data() {
    return {
      Chart4: null,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 总生产量
      allTotMete: 0,
      // 混凝土拌合站数据表格数据
      productList: [],
      // 拌合站搜索框数据
      stationList: [],
      // 查询参数
      queryParams: {
        type: '0',
      },
      deptId: null
    };
  },
  components: {
    deatetime,
  },
  created() {},
  mounted() {
    this.getList();
    this.getProjectList();
  },
  watch: {
    deptId: {
      handler(val, oldVal) {
        if (val) {
          this.queryParams.id = val;
          this.getProjectList();
        } else {
          // console.log("先选择标段")
        }
      },
      deep: true,
      immediate: true,
    },
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    /** 查询拌合站搜索框数据 */
    getProjectList() {
      deptListData(this.queryParams).then((response) => {
        this.stationList = response;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams = this.getSearchParams();
      this.getList();
    },
    getSearchParams() {
      const params = {};
      for (const key in this.queryParams) {
        if (key === "time") {
          const time = this.queryParams[key];
          if (time && time.length === 2) {
            params.startTime = time[0];
            params.endTime = time[1];
          }
        } else {
          params[key] = this.queryParams[key];
        }
      }
      return params;
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.type = "0";
      this.queryParams.id = "";
      this.$refs.deatetime.startTime = null;
      this.$refs.deatetime.endTime = null;
      this.queryParams.time = [];
      this.queryParams.startTime = "";
      this.queryParams.endTime = "";
      this.resetForm("queryForm");
      this.handleQuery();
    },
    getList() {
      productGetList(this.queryParams).then((response) => {
        if (document.getElementById("Chart4")) {
          this.createDayChart(response);
        } else {
          this.$nextTick(() => {
            this.createDayChart(response);
          });
        }
      });
    },
    // 盘数图表
    createDayChart(data) {
      if (null == this.Chart4) {
        this.Chart4 = echarts.init(document.getElementById("Chart4"));
      } else {
        this.Chart4.clear();
      }

      if (!!data) {
        var obj = {
          timeArr: [],
          totMeteArr: []
        }
        if (this.queryParams.type == "3") {
          data.forEach((v) => {
            obj.timeArr.push(v.dateDays)
            obj.totMeteArr.push(v.totMete)
          });
        }
        else if (this.queryParams.type == "0") {
          data.forEach((v) => {
            let a = v.weeks.substr(0, 4)
            let b = v.weeks.substr(4, 6)
            let time = a + '年第' + b + '周'
            obj.timeArr.push(time)
            obj.totMeteArr.push(v.totMete)
          });
        } else if (this.queryParams.type == "1") {
          data.forEach((v) => {
            let a = v.months.substr(0, 4)
            let b = v.months.substr(4, 6)
            let time = a + '年第' + b + '月'
            obj.timeArr.push(time)
            obj.totMeteArr.push(v.totMete)
          });
        } else {
          data.forEach((v) => {
            let time = '2023年第' + v.quarters + '季度'
            obj.timeArr.push(time)
            obj.totMeteArr.push(v.totMete)
          });
        }
      }
      let option = this.getLineOption(obj);
      this.Chart4.setOption(option);
    },
    /*** 获取图表配置信息 */
    getLineOption(obj) {
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          top: 50,
          left: '',
          right: '',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: obj.timeArr,
        }],
        yAxis: [{
          name: '总产量(kg)',
          type: 'value',
        }],
        series: [{
          type: 'bar',
          barWidth: '45%',
          data: obj.totMeteArr,
        }]
      };
      return option;
    },
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.chart.setOption()
    },
  }
};
</script>
  
<style lang="scss" scoped>
.datetimepicker {
  display: inline-block;
}
</style>
  
<style lang="scss">
// #Chart4 {
//   width: 100%;
//   height: 360px;
//   transform-origin: 0 0;
// }

.datetimepicker {
  display: flex !important;
  flex-wrap: nowrap;

  .el-select {
    width: 0.8rem !important;
    min-width: 80px;

    .el-input {
      width: 0.8rem !important;
      min-width: 80px;
    }
  }

  .el-date-editor {
    width: 12rem !important;
    // height: 0.36rem;
    // line-height: 0.36rem;
  }
}
</style>



<style lang="scss" scoped>
::v-deep .query {
  .el-form-item__label {
    width: 100px !important;
  }
}
.app-container{
  margin-top: -50px;
}
</style>

    
    
     
    